<script setup>
import {useRoute, useRouter} from "vue-router";

const router = useRouter()
const route = useRoute()

const goShopClick = () => {
  router.push(`/scenic/merchants/${route.query.commodityId}`)
}
</script>

<template>
 <div class="box">
   <div @click="goShopClick" class="icon_box">
     <img src="@/assets/images/icons/shop.jpg" alt="">
     <div class="name">店铺</div>
   </div>
   <div class="button_list">
     <div class="button card">加入购物车</div>
     <div class="button purchase">立即购买</div>
   </div>
 </div>
</template>

<style scoped lang="scss">
.box{
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 5.8rem;
  width: 100vw;
  background-color: #FFFFFF;
  padding: 1rem;
  box-sizing: border-box;
  .icon_box{
    img{
      width: 2.6rem;
      height: 2.2rem;
    }
    .name{
      font-size: 1.2rem;
      color: #666666;
    }
  }
  .button_list{
    display: flex;
    align-items: center;
    .button{
      margin-left: .5rem;
      width: 12.3rem;
      height: 3.8rem;
      border-radius: .5rem;
      font-size: 1.6rem;
      color: #FFFFFF;
      line-height: 3.8rem;
      text-align: center;
    }
    .card{
      background: rgb(246,232,175);
    }
    .purchase{
      background: var(--van-primary-color);
    }
    .purchase:active{
      background: #4b947f;
    }
  }
}
</style>